{include file="public/header-static"/}
{include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">

            {include file="marketing/title"/}

            <div class="row" id="allData">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="card bor" style="height: calc( 100% - 45px );">
                                <div class="card-dth" style="display: flex;">
                                    <div class="item" style="flex: 2;display: flex;flex-direction: column; align-items: center;">
                                        <div class="user-name"
                                             style="width: 100%; text-align: left;padding-left: 20px;">小程序用户数据
                                        </div>
                                        <canvas id="miniProgramData" width="170" height="170"></canvas>
                                        <div id="">
                                            <span>实时访问量</span> <strong>{$viewData.applets.appletsTodayUsers}</strong>
                                        </div>
                                        <div>
                                            <span>昨日访问量</span> <strong>{$viewData.applets.appletsYesTodayUsers}</strong>
                                        </div>
                                        <div>
                                            <span>本月访问量</span> <strong>{$viewData.applets.appletsMonthUsers}</strong>
                                        </div>
                                    </div>

                                    <div class="item" style="flex: 2;display: flex;flex-direction: column; align-items: center;">
                                        <div class="user-name"
                                             style="width: 100%; text-align: left;padding-left: 20px;">H5用户数据
                                        </div>
                                        <canvas id="H5Data" width="170" height="170"></canvas>
                                        <div id="">
                                            <span>实时访问量</span> <strong>{$viewData.h5.h5TodayUsers}</strong>
                                        </div>
                                        <div>
                                            <span>昨日访问量</span> <strong>{$viewData.h5.h5YesTodayUsers}</strong>
                                        </div>
                                        <div>
                                            <span>本月访问量</span> <strong>{$viewData.h5.h5MonthUsers}</strong>
                                        </div>
                                    </div>

                                    <div class="item" style="flex: 3;display: flex;flex-direction: column; align-items: center;">
                                        <div class="user-name"
                                             style="width: 100%; text-align: left;align-items: center;">直属用户数据
                                        </div>
                                        <canvas id="userData" width="200" height="308"></canvas>
                                    </div>
                                      
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card bor" style="margin-bottom: 16px;">
                                <div class="card-dth">
                                    <div class="totalDataTitle">
                                        <div class="item">
                                            <p>总营业额</p>
                                            <span>{$viewData.under.totalPrice}</span>
                                        </div>
                                        <div class="item">
                                            <p>提成点</p>
                                            <span>{$viewData.under.commission_ratio}</span>
                                        </div>
                                        <div class="item">
                                            <p>所得佣金</p>
                                            <span>{$viewData.under.commission}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card bor" style="height: calc( 100% - 166px ) ;">
                                <div class="card-dth2">
                                    <div class="user">
                                        <div class="user-name" style="margin-top: 10px;">总营业额</div>
                                    </div>
                                    <canvas id="findResource" style="margin: auto;"></canvas>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

            <div class="middleData" style="opacity: 0;height: 0;" id="middleData">
                {include file="marketing/middle"/}
            </div>

            <div class="middleRow" style="margin-top: -8px;">
                <div class="pullDown" onclick="pullDown()"></div>
                <div class="pullDownText3 pullDownText" onclick="pullDown()">展开</div>
            </div>

            <div class="list">
                <div class="list-title">
                    <div class="item activeBtn" onclick="add(2,this)">创建活动</div>
                    <!--					<div class="item additem activeBtn" onclick="changeList(1,this)">直属用户</div>-->
                    <!--				    <div class="item additem activeBtn" onclick="changeList(1,this)">活动记录</div>-->
                </div>


                <div class="app-block">
                    <div class="app-content">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <table id="linkstable" lay-filter="linkstable"></table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="rowTable" style="display: none;">
                    <div class="row" id="tableContent">
                        <div class="list-title myUsers" style="padding-left: 15px;">
                            <div class="item activeBtn" myUsersType="0" onclick="marketingUsers(0)">新用户</div>
                            <div class="item" myUsersType="1" onclick="marketingUsers(1)">转换用户</div>
                        </div>
                        <div class="col-md-12">
                            <div class="card">
                                <table id="rowTable" lay-filter="rowTable"></table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>
<script src="__STATIC__/assets/js/custom.js"></script>
{include file="marketing/script"/}
<script>
    // 创建活动
    function add() {
        window.location.href = '{:url("/marketing/marketingAdd")}';
    }

    // 创建活动
    function edit(id) {
        window.location.href = '{:url("/marketing/marketingEdit")}?id=' + id;
    }

    // 创建活动
    function see(id) {
        window.location.href = '{:url("/marketing/marketingShow")}?id=' + id;
    }

    function pullDown() {
        if ($('.pullDownText3').text() == '收起') {
            $('.pullDownText3').text('展开')
            $('#middleData').css('opacity', 0)
            $('#middleData').css('height', 0)
            $('#hiddenData').css('display', 'none')
            $('.middleRow .pullDown').css('right', '48%')
            $('.middleRow .pullDown').css('bottom', '22%')
            $('.middleRow .pullDown').css('transform', 'rotate(180deg)')
        } else if ($('.pullDownText3').text() == '展开') {
            $('.pullDownText3').text('收起')
            $('#middleData').css('opacity', 1)
            $('#middleData').css('height', '100%')
            $('#hiddenData').css('display', 'block')
            $('.middleRow .pullDown').css('right', '49.5%')
            $('.middleRow .pullDown').css('bottom', '170%')
            $('.middleRow .pullDown').css('transform', 'rotate(0deg)')
        }
    }


    function omitBoxClick(e) {
        let val = $(e).next().css('opacity')
        if (val == 0) {
            $(e).next().css('opacity', '1')
        } else if (val == 1) {
            $(e).next().css('opacity', '0')
        }
    }


    function pullDown1() {
        if ($('.pullDownText1').text() == '收起') {
            $('#dataArr1').css('visibility', 'hidden')
            $('#dataArr1').css('height', '0')
            $('.pullDownText1').text('展开全部')
        } else if ($('.pullDownText1').text() == '展开全部') {
            $('#dataArr1').css('visibility', 'visible')
            $('#dataArr1').css('height', '100%')
            $('.pullDownText1').text('收起')
        }
    };

    function pullDown2() {
        if ($('.pullDownText2').text() == '收起') {
            $('#dataArr2').css('visibility', 'hidden')
            $('#dataArr2').css('height', '0')
            $('.pullDownText2').text('展开全部')
        } else if ($('.pullDownText2').text() == '展开全部') {
            $('#dataArr2').css('visibility', 'visible')
            $('#dataArr2').css('height', '100%')
            $('.pullDownText2').text('收起')
        }
    };


</script>

<script>
    // layui插件
    layui.use('table', function () {
        var table = layui.table
            , form = layui.form;
        // 表格初始化
        table.render({
            elem: '#linkstable'
            , skin: 'line' //行边框风格
            , even: true //开启隔行背景
            , url: '{:url("/marketing/index")}'
            , where: {manager: "{$manager}"}
            , method: 'post'
            , page: true //开启分页
            , cols: [[
                {field: 'title_data', title: '二维码/标题/地区'}
                , {field: 'ids', title: '序号/预算'}
                , {field: 'type_data', title: '类型/经办人'}
                , {field: 'time_data', title: '开始/结束时间'}
                , {field: 'users_data', title: '新用户/转换人数', event: 'clickUsers_data', style: 'cursor: pointer'}
                , {field: 'price_data', title: '消费金额/佣金'}
                , {field: 'rightbtn', title: '操作', align: 'center', toolbar: '#barDemo'}
            ]],
            done: function (res) {
                var element = $('td[data-field="rightbtn"]').children('.layui-table-cell');
                element.css('overflow', 'visible');
                element.children('.dropdown-menu').css('min-width', 'auto');
            },
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.count,
                    "data": res.data.list
                };
            }
        });

        table.on('tool(linkstable)', function (obj) {
            let event = obj.event;
            // console.log(obj);
            var datas = obj.data;
            // 用户列表
            if (event === "clickUsers_data") {
                $('.rowTable').css('display', 'flex');
                mid = datas.id;
                marketingUsers(0);
            }
        });
    });

    // 用户数据
    var chartDom = document.getElementById('userData');
    var myChart = echarts.init(chartDom);
    var totalUsers = "{$viewData.under.underTotalUsers}";
    var totalPrice = "{$viewData.under.underTotalPrice}";
    console.log(totalUsers,totalPrice)
    var option = {
        title: '',
        tooltip: {
            trigger: 'item',
        },
        legend: {
            // orient: 'vertical',
            top: '75%',
            left: '0%',
            // y:'center',
            itemWidth: 12,
            itemHeight: 12,
            // itemGap: 25,
            data: ["{a|直属用户总数}\n{b|"+totalUsers+"} {c|个}", "{a|直属营业总额}\n{b|"+totalPrice+"} {c|元}"],
            textStyle: {
                color: '#000',
                fontWeight: 'bold',
                fontSize: 18,
                width: 20,
                height: 20,
                rich: {
                    a: {
                        color: '#999',
                        lineHeight: 20,
                    },
                    b: {
                        fontSize: 20,
                        fontWeight: 600
                    },
                    c: {
                        fontSize: 16
                    }
                }
            }
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: '29%',
                top: '40%',
                style: {
                    //value当前进度
                    //    text: "9998",
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 34,
                    fontWeight: 'bold'
                }
            },
            //第二行文字
            //内容 + 位置
            {
                type: 'text',
                left: '34%',
                top: '56%',
                style: {
                    //maxValue进度条最大值
                    //    text: '总收入',
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 16
                }
            }
        ],
        series: [ //系列列表
            {
                type: 'pie',
                radius: ['80%', '70%'],//['外圆大小', '内圆大小']
                center: ['50%', '30%'],//圆心位置['左右'， '上下']
                hoverAnimation: false,//取消鼠标悬停动画
                animationEasing: 'cubicOut',//设置动画缓动效果
                //取消显示饼图自带数据线条
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    show: false,
                    position: 'left'
                },
                //增加阴影效果
                itemStyle: {
                    normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        label: {  //饼图图形上的文本标签
                            show: false  //平常不显示
                        },
                        labelLine: {     //标签的视觉引导线样式
                            show: false  //平常不显示
                        }
                    },
                },
                data: [
                    //(maxValue进度条最大值 - value当前进度) + 颜色
                    {
                        value:0,
                        itemStyle: {
                            normal: {
                                color: '#E0E0E0'
                            }
                        },
                    },
                    //value当前进度 + 颜色
                    {
                        value: totalUsers,
                        itemStyle: {
                            normal: {
                                color: '#5B78FFFF'
                            }
                        },
                        name: "{a|直属用户总数}\n{b|"+totalUsers+"} {c|个}",
                    },
                ]
            },
            {
                type: 'pie',
                radius: ['50%', '40%'],//['外圆大小', '内圆大小']
                center: ['50%', '30%'],//圆心位置['左右'， '上下']
                hoverAnimation: false,//取消鼠标悬停动画
                animationEasing: 'cubicOut',//设置动画缓动效果
                //取消显示饼图自带数据线条
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    show: false,
                    position: 'left'
                },
                //增加阴影效果
                itemStyle: {
                    normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        label: {  //饼图图形上的文本标签
                            show: false  //平常不显示
                        },
                        labelLine: {     //标签的视觉引导线样式
                            show: false  //平常不显示
                        }
                    },
                },
                data: [
                    //(maxValue进度条最大值 - value当前进度) + 颜色
                    {
                        value: 0,
                        itemStyle: {
                            normal: {
                                color: '#E0E0E0'
                            }
                        },
                        name: ''


                    },
                    //value当前进度 + 颜色
                    {
                        value: totalPrice,
                        itemStyle: {
                            normal: {
                                color: '#E6A500FF'
                            }
                        },
                        name: "{a|直属营业总额}\n{b|"+totalPrice+"} {c|元}"
                    },
                ]
            },

        ]

    };
    myChart.setOption(option);

    // 小程序数据
    var chartDom = document.getElementById('miniProgramData');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '40%',
                style: {
                    //value当前进度
                    text: "{$viewData.applets.appletsTotalUsers}",
                    textAlign: 'center',
                    fill: '#FF5D39FF',
                    fontSize: 22,
                    fontWeight: 'bold',

                }
            },
            {
                type: 'text',
                left: 'center',
                top: '55%',
                style: {
                    //value当前进度
                    text: "用户总数",
                    textAlign: 'center',
                    fill: '#999999FF',
                    fontWeight: 'bold',
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$viewData.applets.appletsTotalUsers}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                },
                //value当前进度 + 颜色
                {
                    value: "{$viewData.applets.appletsLastTotalUsers}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#ff4438FF'},
                                    {offset: 1, color: '#ffa13bFF'}
                                ])
                        }
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);

    // h5数据
    var chartDom = document.getElementById('H5Data');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '40%',
                style: {
                    //value当前进度
                    text: "{$viewData.h5.h5TotalUsers}",
                    textAlign: 'center',
                    fill: '#FF5D39FF',
                    fontSize: 22,
                    fontWeight: 'bold',
                }
            },
            {
                type: 'text',
                left: 'center',
                top: '55%',
                style: {
                    //value当前进度
                    text: "用户总数",
                    textAlign: 'center',
                    fill: '#999999FF',
                    fontWeight: 'bold',
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$viewData.h5.h5TotalUsers}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                },
                //value当前进度 + 颜色
                {
                    value: "{$viewData.h5.h5LastTotalUsers}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#387effFF'},
                                    {offset: 1, color: '#3be6ffFF'}
                                ])
                        }
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);

</script>
<style>
    .dataRow {
        display: flex;
        margin-bottom: 10px;
    }

    .dataRow span {
        flex: 1;
    }

    .positionBox {
        position: relative;
    }

    .positionBox .pullDown1 {
        position: absolute;
        right: 2%;
        bottom: 3%;
        transform: rotate(180deg);
        cursor: pointer;
    }

    .positionBox .pullDownText {
        position: absolute;
        right: 6%;
        bottom: 3.5%;
        color: #5C5E66FF;
        cursor: pointer;
    }

    .pullDown1:before, .pullDown1:after {
        position: absolute;
        content: '';
        border-top: 10px transparent dashed;
        border-left: 10px transparent dashed;
        border-right: 10px transparent dashed;
        border-bottom: 10px #fff solid;
    }

    .pullDown1:before {
        border-bottom: 10px #898A8FFF solid;
    }

    .pullDown1:after {
        top: 2px; /*覆盖并错开1px*/
        border-bottom: 10px #fff solid;
    }

    .positionBox1 {
        position: relative;
    }

    .positionBox1 .pullDown1 {
        position: absolute;
        right: -35%;
        top: 115%;
        transform: rotate(180deg);
        cursor: pointer;
    }

    .pullDown1:before, .pullDown1:after {
        position: absolute;
        content: '';
        border-top: 7px transparent dashed;
        border-left: 7px transparent dashed;
        border-right: 7px transparent dashed;
        border-bottom: 7px #fff solid;
    }

    .pullDown1:before {
        border-bottom: 7px #5C5F66FF solid;
    }

    .pullDown1:after {
        top: 2px;
        border-bottom: 7px #fff solid;
    }


    .middleData {
        display: flex;
        margin-bottom: 15px;
    }

    .middleData .middleItem {
        flex: 1;
        background-color: #fff;
        margin-right: 15px;
        border-radius: 8px;
    }

    .middleData .middleItem:nth-child(3) {
        margin-right: 0;
    }

    .middleRow {
        position: relative;
        width: 100%;
        height: 20px;
    }

    .middleRow .pullDown {
        position: absolute;
        right: 48%;
        bottom: 22%;
        transform: translate(-50%, -50%);
        transform: rotate(180deg);
        cursor: pointer;
    }

    .middleRow .pullDownText {
        position: absolute;
        right: 50%;
        bottom: 50%;
        color: #5C5E66FF;
        cursor: pointer;
    }

    .pullDown:before, .pullDown:after {
        position: absolute;
        content: '';
        border-top: 10px transparent dashed;
        border-left: 10px transparent dashed;
        border-right: 10px transparent dashed;
        border-bottom: 10px #fff solid;
    }

    .pullDown:before {
        border-bottom: 10px #898A8FFF solid;
    }

    .pullDown:after {
        top: 2px; /*覆盖并错开1px*/
        border-bottom: 10px #f1f2f7 solid;
    }


    .findResource-legend {
        margin-right: 50px;
    }

    .totalDataTitle {
        display: flex;
        justify-content: space-evenly;
        height: 90px;
    }

    .totalDataTitle .item {
        margin-top: 20px;
    }

    .totalDataTitle .item p {
        color: #999999FF;
    }

    .totalDataTitle .item span {
        font-size: 24px;
        color: #E6A500FF;
    }

    .totalDataTitle .item:nth-child(1) span {
        color: #5B78FFFF;
    }

    .u-left {
        margin-right: 98px;
    }

    .icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #5B78FFFF;
    }

    .omitBox, .omitBox2 {
        opacity: 0;
        position: absolute;
        top: 135%;
        left: -32%;
        width: 126px;
        height: 145px;
        background-color: #fff;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        flex-direction: column;
    }

    .omitBox:before {
        content: '';
        position: absolute;
        top: -7%;
        right: 23%;
        width: 0;
        height: 0;

        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 11px solid #f3f3f3;
    }

    .omitBox2:before {
        content: '';
        position: absolute;
        top: -7%;
        right: 7%;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 11px solid #f3f3f3;
    }

    .omitBox text, .omitBox2 text {
        font-weight: 0;
        font-size: 16px;
        color: #9D9D9DFF;
    }
</style>
<style>


    .activeBtn {
        color: #fff !important;
        background-color: #3F6EFFFF !important;
    }

    .list-title {
        display: flex;
        align-items: center;
        position: relative;
    }

    .list-title .item {
        font-size: 14px;
        border-radius: 3px;
        background-color: #B9B9B9;
        display: grid;
        place-items: center;
        margin-right: 45px;
        cursor: pointer;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;

    }

    .box-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .box-bottom .bt-item {
        width: 47%;
        background-color: #FDFBF2FF;
        margin: 5px;
        height: 77px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    .box-bottom .bt-item .title {
        color: #666666FF;
        font-size: 16px;
        align-self: flex-start;
    }

    .box-bottom .bt-item span {
        color: #0DA877FF;
        font-size: 18px;
    }

    .box-bottom .bt-item strong {
        margin-left: 30px;
        font-size: 22px;
    }

    .box-bottom .bt-item:nth-child(2) strong {
        margin-left: 15px;
    }


    .d-center {
        display: flex;
    }

    .d-center .item {
        margin: 50px 0 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
    }

    .d-center .item:nth-child(2) {
        flex: 2;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .d-center .item span {
        color: #999999FF;
    }

    .d-center .item p {
        margin-top: 7px;
        font-size: 24px;
        color: #E6A500FF;
        font-weight: 600;
    }

    .d-center .item:nth-child(1) p {
        color: #5B78FFFF;
    }

    .d-fix .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
    }

    .item div {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        width: 110px;
    }

    .item div span {
        color: #999999FF;
        margin-right: 15px;
        flex: 1;
    }

    .item div strong {
        font-size: 20px;
    }

    .add {
        background: rgba(63, 110, 255, 0) !important;
        border: 1px solid #3F6EFF;
        border-radius: 6px;
        color: #3F6EFF !important;
    }

    .sel-dfx {
        display: flex;
        justify-content: space-between;
        margin: auto;
    }

    .sel-mat-top {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .avt {
        background: #3F6EFF !important;
        color: #FFFFFF !important;
    }

    .sel-bottom {
        background: #F0F0F0;
        border-radius: 3px;
        cursor: pointer;
        color: #999999;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .sel-bottom:active {
        background: #3377FF;
    }

    .card-dth {
        padding: 8px;
    }

    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
        text-align: center;
    }


    .user {
        display: flex;
        justify-content: space-between;
        width: 96%;
        margin: auto;
        color: #0E1525;

    }

    .bg-txt {
        display: flex;
        /* margin-top: 5px; */
        align-items: center;
    }


    .str {
        font-size: 12px;
        margin-left: 3px;
        color: #999999;
    }


    .d-fix {
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
    }

    .rig-img img {
        width: 9rem;
        height: 9rem;
    }

    .j {
        background: #5B78FF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .bz {
        background: #22b9ff;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .dy {
        background: #28a745;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .jn {
        background: #F74AFF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .bg-str {
        font-family: 'AliM';
        text-align: left;
        position: relative;
        font-size: 24px;
    }

    .u-rig {
        display: flex;
        justify-content: flex-end;
        padding-top: 10px;
        /* padding-bottom: 30px; */
    }

    .txt-cen {
        text-align: center;
    }

    .list {
        background: white;
        /*height: 100vh;*/
        padding: 20px;
        border-radius: 5px;
    }

    .uname {
        font-size: 18px;
        font-family: 'AliM';
        margin-bottom: 15px;
    }

    .fix-d {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
    }

    .d-th {
        padding-left: 10px;
        text-align: center;
    }

    .numer {
        font-size: 21px;
        font-family: 'AliM';
        font-weight: 600;
    }

    .t {
        color: #576AFB;
    }

    .d-str {
        font-size: 12px;
        font-family: 'AliM';
        margin-top: 5px;
    }

    .d-add {
        font-size: 11px;
        color: #999999;
        margin-top: 5px;
    }

    .b {
        color: #FF6739;
    }

    .w {
        color: #00A0FF;
    }

    .keword {
        display: flex;
    }

    .key-input {
        padding-left: 8px;
        border: 1px solid #e2d7d7;
        border-radius: 6px;
        width: 200px;
    }

    .key-bottom {
        margin-left: 10px;
        background: #007bff;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 34px;
        line-height: 30px;
        color: white;
        height: 30px;
        margin-top: 5px;
        cursor: pointer
    }

    .key-bottom:active {
        background: #71a2d8;
    }

    .rowTable {
        position: fixed;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, .3);
        z-index: 999;
    }

    .rowTable .row {
        width: 70%;
        height: 60%;
        overflow-y: scroll;
        background: #fff;
        padding: 20px;
        position: relative;
    }

    .rowTable .row .button {
        padding: 10px;
        color: #fff;
        background-color: #3F6EFFFF;
        position: absolute;
        top: 0;
        right: -45px;
        z-index: 99;
        cursor: pointer;
    }
</style>
</body>
</html>
